<template>
  <div class="container" :style="{height:windowHeight-70+'px'}">
    <div class="move_box">
      <div style="height: 60px;"></div>
      <div class="menu_list">
        <div class="menu_item" v-for="(item, index) in menuList" :key="index" @click="handleToMoveView(item)">
          <span>{{ item.title }}</span>
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>
      <div class="footer">
        <div>
          <p>{{ $store.state.footerData[2]?.title }}</p>
          <div class="overflow">{{ $store.state.footerData[2]?.subtitle }}</div>
        </div>
        <div class="">
          <p>{{ $store.state.footerData[0]?.title }}</p>
          <p class="point">OpenGADL社区<i class="el-icon-right pl6"></i></p>
          <p class="point">文档中心<i class="el-icon-right pl6"></i></p>
        </div>
        <div class="">
          <p>{{ $store.state.footerData[1]?.title }}</p>
          <p><i class="el-icon-message"></i> 联系邮箱：{{ $store.state.footerData[1]?.email }}</p>
          <p><i class="el-icon-phone-outline"></i> 客服电话：{{ $store.state.footerData[1]?.phone }}</p>
        </div>
      </div>
    </div>
    <div class="pc_box">
      <div class="content">
        <div class="directory">
          <div class="list">
            <template v-for="(item, index) in menuList">
              <div
                class="list-item"
                :class="index == tabIndex ? 'active' : ''"
                :key="index"
                @click="handleTab(item, index)"
              >
                <span class="file_name">{{ item.title }}</span>
                <i
                  class="el-icon-arrow-down"
                  v-if="index == tabIndex && item.isOpen"
                ></i>
                <i class="el-icon-arrow-right" v-else></i>
              </div>
              <div :id="item.id" v-show="item.isOpen"></div>
            </template>
          </div>
        </div>
        <div id="preview"></div>
      </div>
    </div>
  </div>
</template>
<script>
import Vditor from "vditor";
import "vditor/dist/index.css";

export default {
  name: "web_content",
  components: {},
  data() {
    return {
      toc: [],
      menuList: [],
      tabIndex: 0,
      activeId:'',
      windowHeight: 0
    };
  },
  props: {},
  mounted() {
    this.getData()
    this.getWindowHeight(); // 在初始化时获取窗口高度
    window.addEventListener('resize', this.getWindowHeight); // 在窗口大小改变时重新获取窗口高度
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.getWindowHeight); // 组件销毁时移除resize事件监听器
  },
  methods: {
    //获取数据
    getData(){
      this.$api.GetListByType(9).then((res)=>{
        this.menuList = res[0].urlList
        this.menuList.forEach((item,index)=>{
          item.isOpen = false
          item.id = 'a'+item.id
        })
        this.activeId = this.menuList[0].id
        this.getMdData(this.menuList[0].url)
        this.menuList[0].isOpen = true
      })
    },
    initOutline() {
      const headingElements = [];
      Array.from(document.getElementById("preview").children).forEach(
        (item) => {
          if (
            item.tagName.length === 2 &&
            item.tagName !== "HR" &&
            item.tagName.indexOf("H") === 0
          ) {
            headingElements.push(item);
          }
          this.toc = [];
          headingElements.forEach((item) => {
            this.toc.push({
              id: item.id,
              offsetTop: item.offsetTop,
            });
          });
        }
      );
      //初始化事件
      console.log(document.querySelectorAll(`#${this.activeId}>ul li`));
      document.querySelectorAll(`#${this.activeId}>ul li`).forEach((item) => {
        item.removeEventListener("click", this.LIClick);
        item.addEventListener("click", this.LIClick);
      });

      window.addEventListener(
        "scroll",
        () => {
          const scrollTop = window.scrollY;
          console.log(scrollTop)
          const currentElement = document.querySelector(
            ".vditor-outline__item--current"
          );
          for (let i = 0, iMax = this.toc.length; i < iMax; i++) {
            if (scrollTop < this.toc[i].offsetTop - 30) {
              if (currentElement) {
                currentElement.classList.remove(
                  "vditor-outline__item--current"
                );
              }
              let index = i > 0 ? i - 1 : 0;
              document
                .querySelector(
                  'span[data-target-id="' + this.toc[index].id + '"]'
                )
                .classList.add("vditor-outline__item--current");
              break;
            }
          }
        },
        true
      );
    },

    getMdData(url) {
      var that = this;
      /// get 请求拿到返回流
      fetch(url)
        .then((response) => response.text())
        .then((data) => {
          Vditor.preview(document.getElementById("preview"), data, {
            speech: {
              enable: true,
            },
            anchor: 1,
            after() {
              if (window.innerWidth <= 768) {
                return;
              }
              const outlineElement = document.getElementById(that.activeId);
              console.log(outlineElement)
              Vditor.outlineRender(
                document.getElementById("preview"),
                outlineElement
              );
              if (outlineElement.innerText.trim() !== "") {
                outlineElement.style.display = "block";
                that.initOutline();
              }
            },
          });
        });
    },

    LIClick(event) {
      var previewdom = document.getElementById("preview");
      var name = event.target.getAttribute("data-target-id");
      var activeDom = event.target;
      if (!name) {
        activeDom = event.target.parentElement;
      }
      if (!name) {
        name = event.target.parentElement.getAttribute("data-target-id");
      }
      var finditem = this.toc.find((x) => {
        if (x.id == name) {
          return true;
        }
        return false;
      });
      document
        .querySelectorAll(`#${this.activeId}>ul li span`)
        .forEach((item) => {
          item.classList.remove("active_li");
        });
      activeDom.classList.add("active_li");
      if (finditem?.offsetTop) {
        previewdom.scrollTo(window.screenY, finditem.offsetTop - 80);
      } else {
        previewdom.scrollTo(window.screenY, 0);
      }
    },

    handleTab(row, index) {
      row.isOpen = !row.isOpen;
      this.activeId = row.id
      this.tabIndex = index;
      if (row.isOpen) {
        this.getMdData(row.url);
      }
      this.menuList.forEach((k, i) => {
        if (index != i) {
          k.isOpen = false;
        }
      });
      this.$forceUpdate()
      document.getElementById("preview").scrollTo(window.screenY, 0);
    },

    getWindowHeight() {
      this.windowHeight = window.innerHeight;
    },

    handleToMoveView(item){
     this.$router.push({
          path: '/move_view',
          query:{
            name:item.title
          }
        })
    }
  },
};
</script>
<style>
.active_li {
  color: #fff !important;
  background: linear-gradient(90deg, rgba(129, 48, 142, 1) 0%, rgba(42, 39, 167, 1) 100%), rgba(253, 240, 255, 1);
}
</style>
<style lang="scss" scoped>
.move_box,.pc_box{
  display:none;
}
@media screen and (max-width: 750px) {
  body{
    background-color: #e8e8e8;
  }
    .move_box{
      display: block;
    }

    .menu_list{
      padding: 0 16px;
      height: 400px;
      overflow-y: auto;
    }

    .menu_item{
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #e9e2e2;
      span{
        font-size: 16px;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
      }
      i{
        font-size: 18px;
      }
    }

    .footer{
      position: fixed;
      bottom: 0;
      width: 100%;
      padding:16px;
      background-image:-webkit-linear-gradient( -180deg, rgb(42,39,167) 0%, rgb(130,48,142) 100%);
      .overflow{
        width: 345px;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height:30px;
        color: rgba(181, 181, 181, 1);
        font-size: 14px;
        }
    }
    .footer>div{
      margin-bottom:20px;
    }
    .footer>div>p{
      text-align: left;
      margin-bottom: 16px;
      color: rgba(181, 181, 181, 1);
      font-size: 14px;
      }
      .footer>div>p:first-child{
      font-size: 18px;
      color: rgba(217, 217, 217, 1);
      }
}

@media screen and (min-width: 750px) {
  .container {
    padding: 0 360px;
    padding-top: 70px;
    background: #e8e8e8;
    height: calc(100% - 70px);
    .content {
      display: flex;
      background-color: #fff;
      height: 100%;
    }
  }
  .pc_box{
    display: block;
    height: 100%;
    .active {
      background: linear-gradient(90deg, rgba(129, 48, 142, 1) 0%, rgba(42, 39, 167, 1) 100%), rgba(253, 240, 255, 1);
      color: #fff;
    }
     .active::before{
        content: '';
        display: inline-block;
        height: 70%;
        width: 2px;
        background: rgba(102, 8, 116, 1)
      }
    
      .file_name{
        padding-left: 16px;
      }
    
    .directory {
      width: 250px;
      border-right: 1px solid #e8e8e8;
    }
    
    #preview {
      flex: 1;
    }
    
    .vditor-outline {
      font-size: 15px;
    }

    .footer{
      background-image:-webkit-linear-gradient( -180deg, rgb(42,39,167) 0%, rgb(130,48,142) 100%);
    }
    
    .list{
      height: 100%;
      overflow-y: auto;
    }
    
    .list-item {
      position: relative;
      padding-right: 16px;
      display: flex;
      align-items: center;
      font-size: 16px;
      height: 50px;
      cursor: pointer;
      i{
        position: absolute;
        right: 16px;
      }
    }
    
    .left {
    }
    .right {
      margin-bottom: 100px;
      overflow-y: auto;
    }
  }
}


</style>
